<template>
  <layout-content v-loading="uiState.loading" header="Namespaces">
    <div style="float: left">
      <el-button
        v-has-permissions="{
          scope: 'cluster',
          apiGroup: '',
          resource: 'namespaces',
          verb: 'create'
        }"
        type="primary"
        size="small"
        @click="onShouldCreate(true)"
      >
        YAML
      </el-button>
      <el-button
        v-has-permissions="{
          scope: 'cluster',
          apiGroup: '',
          resource: 'namespaces',
          verb: 'create'
        }"
        type="primary"
        size="small"
        @click="onShouldCreate()"
      >
        {{ $t("commons.button.create") }}
      </el-button>
      <el-button
        v-has-permissions="{
          scope: 'cluster',
          apiGroup: '',
          resource: 'namespaces',
          verb: 'delete'
        }"
        type="primary"
        size="small"
        :disabled="selections.length === 0"
        @click="confirmDelete()"
      >
        {{ $t("commons.button.delete") }}
      </el-button>
    </div>
    <complex-table
      v-model:selects="selections"
      :pagination-config="query.paginationConfig"
      :search-config="query.searchConfig"
      :data="srcList"
      @search="reloadResourceList"
    >
      <el-table-column type="selection" fix />
      <el-table-column
        :label="$t('commons.table.name')"
        prop="metadata.name"
        show-overflow-tooltip
        fix
      >
        <template #default="{ row }">
          <el-button link type="primary" @click="onShouldViewDetails(row)">
            {{ row.metadata.name }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.cluster.label')"
        prop="metadata.labels"
        min-width="200px"
      >
        <template #default="{ row }">
          <el-space wrap>
            <el-tag
              v-for="(value, key) in row.metadata.labels"
              :key="key"
              type="info"
              size="small"
            >
              {{ key }}={{ value }}
            </el-tag>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('commons.table.status')"
        prop="metadata.status"
        fix
      >
        <template #default="{ row }">
          <el-button
            v-if="row.status.phase === 'Active'"
            type="success"
            size="small"
            plain
            round
          >
            {{ row.status.phase }}
          </el-button>
          <el-button
            v-if="row.status.phase === 'Terminating'"
            type="warning"
            size="small"
            plain
            round
          >
            {{ row.status.phase }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('commons.table.created_time')"
        prop="metadata.creationTimestamp"
        fix
      >
        <template #default="{ row }">
          {{ getAge(row.metadata.creationTimestamp) }}
        </template>
      </el-table-column>
      <ko-table-operations
        :buttons="options.buttons"
        :label="$t('commons.table.action')"
      />
    </complex-table>
  </layout-content>
</template>

<script setup lang="ts">
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import ComplexTable from "@/views/domain/kubeHud/views/components/complex-table/index.vue";
import KoTableOperations from "@/views/domain/kubeHud/views/components/ko-table-operations/index.vue";
import { useI18n } from "vue-i18n";
import { Namespace, useK8SApi } from "@/views/domain/kubeHud/api/k8s";
import { reactive } from "vue";
import {
  useBaseCRUDProvider,
  useBaseCRUDRoute
} from "@/views/domain/kubeHud/api/provider/baseListProvider";
import { KRouteNamespace } from "@/views/domain/kubeHud/router";
import { checkPermissions } from "@/views/domain/kubeHud/utils/permission";
import { getAge } from "@/views/domain/kubeHud/utils";
// import { listNamespace, deleteNamespace, getNamespace } from "@/api/namespaces";
// import { downloadYaml } from "@/utils/actions";
// import { checkPermissions } from "@/utils/permission";

const { t } = useI18n();
const { namespaceRepo } = useK8SApi();

type Prop = {};
const props = defineProps<Prop>();

const operation = reactive({});

const {
  selections,
  srcList,
  query,
  router,
  uiState,
  downloadSourceAsYaml,
  getResourceDetails,
  getResourceList,
  updateResource,
  deleteResource,
  confirmDelete,
  reloadResourceList
} = useBaseCRUDProvider({
  request: {
    getDetailsReq: namespaceRepo.getNamespaceDetail,
    getListReq: namespaceRepo.getNamespaceList,
    updateReq: namespaceRepo.updateNamespace,
    deleteReq: namespaceRepo.deleteNamespace,
    createReq: namespaceRepo.createNamespace
  }
});

const { pushTo } = useBaseCRUDRoute({ router });

const options = reactive({
  buttons: [
    {
      label: t("commons.button.edit"),
      icon: "el-icon-edit",
      click: row => {
        pushTo(KRouteNamespace.Edit, { namespace: row.metadata.name });
      },
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "namespaces",
          verb: "update"
        });
      }
    },
    {
      label: t("commons.button.edit_yaml"),
      icon: "el-icon-edit",
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "namespaces",
          verb: "update"
        });
      },
      click: row => {
        pushTo(KRouteNamespace.Edit, {
          namespace: row.metadata.name,
          yamlShow: true
        });
      }
    },
    {
      label: t("commons.button.download_yaml"),
      icon: "el-icon-download",
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "namespaces",
          verb: "get"
        });
      },
      click: row => {
        downloadSourceAsYaml(row);
      }
    },
    {
      label: t("commons.button.delete"),
      icon: "el-icon-delete",
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "namespaces",
          verb: "delete"
        });
      },
      click: row => {
        confirmDelete(row);
      }
    }
  ]
});

const onShouldCreate = (yaml?: boolean) => {
  pushTo(KRouteNamespace.Create, { yaml: yaml ? "true" : "" });
};
const onShouldViewDetails = (ns: Namespace) => {
  pushTo(KRouteNamespace.Details, { namespace: ns.metadata.name });
};
</script>

<style scoped></style>
